<template>
    <div @click="onHandleClick" class="border-2 border-solid border-#EBF4FF rounded-8px bg-#EBF4FF" :class="{'bg-primary border-primary shadow-lg shadow-lightgray': isActive}">
        <div class="p-14px relative" :class="{'text-white': isActive}">
            <div class="flex items-center justify-between">
                <div>{{ cardInfo?.name }}</div>
                <div class="flex items-center justify-between flex-1 ml-4px">
                    <div v-if="cardInfo?.status === 2" class="text-red text-sm bg-white p-4px rounded-4px">草稿</div>
                    <div  v-if="cardInfo?.status === 1" class="text-lightgray text-sm bg-white p-4px rounded-4px">已下架</div>
                    <img v-if="cardInfo?.status === 2" class="w-16px h-16px cursor-pointer" src="../../../assets/image/icon-delete.png" />
                </div>
                <!-- <div class="text-primary bg-white px-8px py-4px rounded-4px text-base">下架</div> -->
            </div>
            <!-- <img v-if="isActive" class="w-68px h-45px absolute right-8px top-0" src="../../../assets/image/membership/icon-v.png" alt=""> -->
        </div>
        <div class="bg-white p-16px rounded-6px">
            <div class="text-sm mb-8px">创建时间：{{ cardInfo?.createTime }}</div>
            <div class="text-sm">创建人：{{ cardInfo?.createUserId }}</div>
            <div class="flex justify-between text-sm mt-20px">
                <div>
                    <div class="text-primary mb-8px">{{ cardInfo?.vipCount }}<span class="">人</span></div>
                    <div class="text-lightgray">会员总数</div>
                </div>
                <div>
                    <div class="text-primary mb-8px">{{ cardInfo?.vipNewCount }}<span class="">人</span></div>
                    <div class="text-lightgray">近30天新增会员数</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import { MemberCardDto } from '@/api/membership/type'

const props = defineProps({
    isActive: {
        type: Boolean,
        default: false
    },
    cardInfo: {
        type: Object as PropType<MemberCardDto>
    }
})

const emits = defineEmits(['click'])

const onHandleClick = () => {
    emits('click')
}

</script>
<style lang="scss" scoped>
</style>
